<template>
    <!-- 猜你喜欢 -->
    <div class="caption">
      <span class="text">猜你喜欢</span>
    </div>

    <div class="guess">
        <div
          class="guess-item"
          @click="$router.push('/goodsDetail?goods_id='+item.goods_id)"
          v-for="item in goodsGuessList"
          :key="item.goods_id"
        >
            <div class="image-box">
              <img class="image" v-img-lazy="global.MINIO_FILE_DOMAIN + item.cover_url"/>
            </div>

            <!-- 名称区域开始 -->
            <div class="name ellipsis">{{ item.goods_name }}</div>
            <!-- 名称区域结束 -->

            <!-- 价格区域开始 -->
            <div class="price-box">
              <!-- 价格 -->
			        <div class="price">
                <span class="symbol">¥</span>
                <span class="num">{{ (item.price/100).toFixed(2) }}</span>
              </div>

              <!-- 市场价格 -->
              <div class="market-price">
                <span class="symbol">¥</span>
                <span class="num">{{ (item.market_price/100).toFixed(2) }}</span>
              </div>
            </div>
            <!-- 价格区域结束 -->

            <!-- 销售量区域开始 -->
            <div class="sales-num-box">
              <span class="txt">销售量</span>
              <span class="num" v-if="item.sales_num > 0">{{item.sales_num}}</span>
              <span class="num" v-else>10000</span>
            </div>
            <!-- 销售量区域结束 -->
        </div>
    </div>
    <div class="loading-text" v-if="!finish"> 正在加载... </div>
    <div class="loading-text" v-else> 我也是有底线的 </div>
</template>
  
<script setup>
import { ref, onMounted, inject } from 'vue'
import { reqGetHomeGoodsGuessAPI } from "@/apis/home";

// 全局属性
const global = inject('global')

// 猜你喜欢商品
const goodsGuessList = ref([])

// 页码
const page = ref(1)

// 条数
const pageSize = ref(20)

// 完成标识
const finish = ref(false)

onMounted(() => {
    getHomeGoodsGuess()
})
  
// 获取推荐
const getHomeGoodsGuess = async () => {
    if (finish.value == true) {
      return
    }
    const result = await reqGetHomeGoodsGuessAPI(page.value, pageSize.value)
    const goods = result.data.goods != null ? result.data.goods : []
    goodsGuessList.value.push(...goods)
    if (page.value < result.data.page_total) {
      page.value++
    } else {
      finish.value = true
    }
}
  
// 重置数据
const resetData = () => {
    page.value = 1
    goodsGuessList.value = []
    finish.value = false
}
  
// 导出
defineExpose({
    getHomeGoodsGuess,
    resetData
})
</script>
  
<style lang="scss">
  /* 热门分类 */
  .caption {
    display: flex;
    justify-content: center;
    line-height: 1;
    padding: 18px 0 20px;
    font-size: 16px;
    color: #262626;
    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 14px 0 15px;
  
      &::before,
      &::after {
        content: '';
        width: 10px;
        height: 10px;
        background-image: url(@/assets/images/bubble.png);
        background-size: contain;
        margin: 0 5px;
      }
    }
  }
  
  /* 猜你喜欢 */
  .guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 10px;
    .guess-item {
      display: flex;
      flex-direction: column;
      width: 49%;
      padding: 12px 10px 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      overflow: hidden;
      background-color: #fff;
      .image-box {
        text-align: center;
        .image {
          width: 152px;
          height: 152px;
        }
      }

      // 名称区域
      .name {
        justify-content: start;
        margin: 5px 0;
        font-size: 14px;
        color: #262626;
        line-height: 20px;
      }

      // 价格区域
      .price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          color: #cf4444;
          .symbol {
            font-size: 12px;
          }
          .num {
            font-size: 16px;
            margin-left: 2px;
          }
        }
        .market-price {
          color: #ccc;
          text-decoration: line-through;
          font-size: 13px;
        }
        .small {
          font-size: 80%;
        }
      }

      // 销售量区域
      .sales-num-box {
        display: flex;
        justify-content: flex-end;
        font-size: 12px;
        padding-top: 6px;
        color: #ccc;
        .txt {
          padding-right: 2px;
        }
      }
    }
  }
  // 加载提示文字
  .loading-text {
    text-align: center;
    font-size: 14px;
    color: #666;
    padding: 10px 0;
  }
</style>